<!DOCTYPE html>
<html>
    
    <head>
        <title>title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="themes/juguiding.min.css" />
        <link href="src/css/jquery.mobile.structure-1.3.2.min.css" rel="stylesheet">
        <link href="src/css/style.css" rel="stylesheet">
        <script src="lib/jquery-1.10.2.js"></script>
        <script src="lib/jquery.mobile-1.3.2.js"></script>
         <script src="../database.js"> </script>
        <script src="../code.js"></script>
        <style type="text/css">
         .add-to-schedual, .add-to-available{ position: relative; float: right; z-index: 10; top: 4px;}
         .change{}
         .errorClass { border:  3px solid red; }
         .errorradio{ color: red;}
         .hide{ display: none;}
         .color {color: #007600 ;}
         .hidebydoctor { display: none;}
         .hidebytime {display: none ;}
         .hidebyday {display: none}
         .hidebygroup {display: none}
         .ui-bar-f { background-color: #007600 ;
            color:  #ffffff }
         .hidecourse{display: none;}
        </style>
        </head>
    
    <body>
  
    <div data-role="page" id="page1"  >
            
            <div data-role="content" id ="con">
                <img id="UJ" src="images/3f4c4a4f042402b645d1dd313a7a38e2_97f4b1422d07fc3d3ebb4755b5dde8f04e8580d4.gif"
                alt="UJ_Image" width="180" height="150" style="display: block; margin: 0 auto">
                <strong id="name_app" style="text-align:center;" class="color">Guiding Student Application</strong>
                <div id ="pas">
                <input type="password" id="text_password" data-mini="true" placeholder="Password" required >
                </div>
              <button id="login" data-inline="true">Log In</button>
              <button id="S_UP" type="submit" data-inline="true">Sign Up</button>
             
             
           
              
            </div>
            <div id = "loadpage3"> </div>
        </div>
       
        <div data-role="page" id="page2">
            <div data-role="header" data-theme="f" data-position="fixed" data-fallscreen="true" >
                 <h1 id="SU_text">Sign Up </h1>   
            </div>
            <div data-role="content">
                    <div>      
                    <input type="text" id="Student_Name" data-mini="true" placeholder="Student Name"/> 
                    </div>
                <div>
                    <input type="text" id="Student_ID" data-mini="true" placeholder="Student ID"/> 
                 </div>
                <div>
                    <input type="password" id="T_password" data-mini="true" placeholder="Create your password"/> 
                </div>
                <div>
                    <input type="password" id="T_REPassword" data-mini="true" placeholder="Rewrite your password"/> 
                 </div>
                <fieldset data-role="controlgroup" id="radio_g" data-type="horizontal"  >
                    <legend>Department</legend>
                   <!-- <input type="radio" id="radio1" name="radio1" checked="checked" value="1">
                    <label for="radio1">CIS</label>
                    <input type="radio" id="radio2" name="radio1" value="2">
                    <label for="radio2">BIT</label> -->
                </fieldset>
                 
                
                <label>Year Subscription</label>
              <select id = "year" data-inline="true">
              
              </select> 
               </div>  
                <div data-role="footer"  data-theme="f" class="ui-btn" data-position="fixed" data-fallscreen="true" >
                 <!--<a href="#page1" data-role="button" id="back_to" data-rel="page" data-inline="true" >Back</a>-->
               <!--  <button id="back_to" data-inline="true" >Back</button>-->
                 <button id="b_sub" data-inline="true">Submit</button>
                </div>
            
            
        </div>
        <div data-role="page" id="page3"> 
             <div data-role="header" data-theme="f" data-position="fixed" data-fallscreen="true"  >
                <h1 id="update_page">Courses Taken</h1> 
                <button id ="logout" class="ui-btn-right">Log Out</button>
                 <button id="profile" class="ui-btn-left"  >Profile</button>
              
            </div>
            <div data-role="content" id ="3">
             
                <fieldset id="Course_taken" data-role="controlgroup" data-mini="true">
                   
                </fieldset>
                  
                <div id="program"></div>
                <div id="output"></div>
            </div>
            <div data-role="footer" data-theme="f" data-position="fixed"  class="ui-btn" >
                <button id ="B_import" data-inline="true">Import</button>
                <button id ="guide" data-inline="true">Guide</button>
              
                <button id ="B_Save" data-inline="true">Save</button>
                  </div>
        </div>
        <div data-role="page" id="page4">
            <div data-role="header" data-theme="f"  data-position="fixed" data-fallscreen="true" >
                <h1 id="guidepage">schedule</h1> 
                <button id ="logout2" class="ui-btn-right">Log Out</button>
                 <button id="update" class="ui-btn-left"  >Update</button>
              
            </div>
            <div data-role="content"></div>
         
           
         <!--  <fieldset data-role="controlgroup" data-type="horizontal-->
            
             <label for = "Day_List" class="color">Day</label>
             <select id = "Day_List" data-inline="true">
               <option value = "Sun-Tue-Thu">Sun-Tue-Thu</option>
               <option value = "Mon-Wed">Mon-Wed</option>
               <option value="not-matter">Not matter</option>
             </select>  

           
             <label for = "Time_List" class="color">Time</label>
             <select id = "Time_List" data-inline="true">
               <option value = "08-00-09-00">08:00-09:00</option>
               <option value = "09-00-10-00">09:00-10:00</option>
               <option value = "10-00-11-00">10:00-11:00</option>
               <option value = "11-00-12-00">11:00-12:00</option>
               <option value = "12-00-13-00">12:00-13:00</option>
               <option value = "13-00-14-00">13:00-14:00</option>
               <option value = "14-00-15-00">14:00-15:00</option>
               <option value = "15-00-16-00">15:00-16:00</option> 
               <option value="08-00-09-30">08:00-09:30 </option>
               <option value="09-30-11-00">09:30-11:00</option>
               <option value="11-00-12-30">11:00-12:30</option>
               <option value="12-30-14-00"> 12:30-14:00</option>
               <option value="14-00-15-30">14:00-15:30</option>
               <option value="15-30-17-00">15:30-17:00</option>
                <option value="not-matter">Not matter</option>
             </select> 
             
             
             <label for ="doctor_List" class="color">Doctor</label> 
             <select id = "doctor_List" data-inline="true">
                 <option value="not-matter">Not matter</option>
              <!-- <option value = "Abdallah-al-haj">Abdallah al haj </option>
               <option value = "Ahmad-al-saraireh">Ahmad al saraireh</option>
               <option value = "Evon-Abu-tayeh">Evon Abu tayeh</option>
               <option value = "4">khalid al debie</option>
               <option value = "5">Moa'ath abu faraj</option>
               <option value = "6">Nazeeh Gatatshe</option>
               <option value = "7">Orabe al manaseer</option>
               <option value = "8">Hamed al Boudor</option>
               <option value = "9">Heba al rwashdeh</option>
               <option value = "10">Shadi Alian</option>
               <option value = "11">Tareq al kreshan </option>  -->
             </select> 
               <label for ="level" class="color" >level</label> 
             <select id = "level" data-inline="true">
                  <option value="1">First Year</option>
                  <option value="2">Second Year</option>
                  <option value="3">Third Year</option>
                  <option value="4">Fourth Year</option>
                  <option value="not-matter">Not matter</option>
             </select>
               <label for ="group" class="color" >Group</label> 
             <select id = "group" data-inline="true">
                 <option value="not-matter">Not matter</option>
             </select>
               <span id="marker"></span>
            
            
            <div data-role="footer" class="ui-btn" data-theme="f">
                <button id ="save_sch" data-inline="true">Save</button>
                <button id ="last" data-inline="true">Last Guide</button>
            </div>
        </div>
      <div data-role="page" id="page5">
            <div data-role="header" data-theme="f" data-position="fixed" data-fallscreen="true">
                 <h1 id="pro">Profile </h1>   
            </div>
            <div data-role="content">
                            
                <input type="text" id="S_Name" data-mini="true" placeholder="Student Name" disabled=""/>                
                    <input type="text" id="S_ID" data-mini="true" placeholder="Student ID" disabled="" />   
                    <input type="password" id="Old_password" data-mini="true" placeholder="Old password"/> 
                    <input type="password" id="new_password" data-mini="true" placeholder="Create new password "/>                    
                    <input type="password" id="new_REPassword" data-mini="true" placeholder="Rewrite new password"/>               
                <fieldset data-role="controlgroup" id="radio_g1" data-type="horizontal"  >
                    <legend>Department</legend>
                   <!-- <input type="radio" id="radio1" name="radio1" checked="checked" value="1">
                    <label for="radio1">CIS</label>
                    <input type="radio" id="radio2" name="radio1" value="2">
                    <label for="radio2">BIT</label> -->
                </fieldset>
                <label>Year Subscription</label>
              <select id = "year1" data-inline="true">
               
              </select> 
                <div data-role="footer" data-theme="f" class="ui-btn" data-position="fixed" data-fallscreen="true">
                <button id="_back" data-inline="true">Back</button>
               <button id="p_save" data-inline="true">Save</button>
               <button id="reset" type="reset" data-inline="true">Reset</button>
                </div>
            </div>
            
        </div>
        
         <div data-role="page" id="page6">
            <div data-role="header" data-position="fixed" data-fallscreen="true">
                 <h1 id="lastpage">Last guide </h1>   
            </div>
            <div data-role="content">
                <table id="sch-table"  border="1">
                    <tr>  
                    <th>Course num</th>
                    <th>Section num</th>
                    <th>Course name</th>
                    <th>Day</th>
                    <th>Time</th>
                    <th>Teacher</th>
                    <th> room </th>
                    <th>Status</th>
                    </tr> 
                </table>       
                
                </div>
            </div>
    </body>

</html>